<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- Use style -->
    <link rel="stylesheet" href="./publicJs/vxe/ui.style.min.css" />
    <link rel="stylesheet" href="./publicJs/vxe/table.style.min.css" />
    <!-- Use vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.5.16/dist/vue.global.prod.js"></script>
    <!-- Use vxe -->
    <script src="./publicJs/vxe/xe-utils.umd.min.js"></script>
    <script src="./publicJs/vxe/ui.index.umd.min.js"></script>
    <script src="./publicJs/vxe/table.index.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div style="max-width: 1000px; margin: 32px auto">
        <h2>Table:</h2>
        <vxe-table
          border
          show-overflow
          show-header-overflow
          show-footer-overflow
          height="600"
          :column-config="{resizable: true}"
          :virtual-y-config="{enabled: true, gt: 0}"
          :data="tableData"
        >
          <vxe-column type="seq" width="70" align="center"></vxe-column>
          <vxe-column field="name" title="Name" width="70" align="center" sortable></vxe-column>
          <vxe-column field="role" title="Role" align="center"></vxe-column>
          <vxe-column field="sex" title="Sex" align="center">
            <template #default="{ row }">
              <vxe-input v-model="row.sex">
                <template #suffix>
                  <vxe-button statys="primary">搜索</vxe-button>
                </template>
              </vxe-input>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <script type="module">
      const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue
      ;(function () {
        var App = {
          setup() {
            const tableData = ref([])
            // 模拟行数据
            const loadList = (size = 200) => {
              const dataList = []
              for (let i = 0; i < size; i++) {
                dataList.push({
                  id: 10000 + i,
                  name: 'Test' + i,
                  role: 'Developer',
                  sex: '男',
                })
              }
              tableData.value = dataList
            }
            loadList(500)
            return {
              tableData,
            }
          },
        }

        Vue.createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
      })()
    </script>
  </body>
</html>
